<template>
    <div class="module-view">
        <a-spin :spinning="getCurrentConnectedSpinning">
            <a-card :bordered="false">
                <template #title>
                    <a-space>
                        <span>{{ !isConnected ? '连接数据库' : (`当前连接数据库：${ checkDatabaseName }` + (checkedTableName ? `.${ checkedTableName }` : ''))}}</span>
                        <a-button v-if="isConnected" size="small" @click="closeConnect">
                            <ArrowLeftOutlined />
                            关闭连接
                        </a-button>
                    </a-space>
                </template>
                <a-spin :spinning="connectSpinning">
                    <MysqlConnectForm v-if="!isConnected" @submit="connect" />
                </a-spin>
                <a-spin :spinning="tablesTableSpinning">
                    <MysqlTablesTable
                        v-if="isConnected"
                        :databaseList="databaseList"
                        :tableList="tableList"
                        :columnList="columnList"
                        :columnsSpinning="columnsSpinning"
                        @checkDatabase="(database) => {
                            checkDatabaseName = database;
                            getTables();
                        }"
                        @checkTable="(database, tableName) => {
                            checkDatabaseName = database;
                            checkedTableName = tableName;
                            getColumnList();
                        }"
                    />
                </a-spin>
            </a-card>
        </a-spin>
    </div>
</template>
<script setup>
import MysqlConnectForm from '@/components/MysqlConnectForm.vue';
import MysqlTablesTable from '@/components/MysqlTablesTable.vue';
import { ref } from 'vue';

const isConnected = ref(false);
const currentConnectedDBName = ref('');
const searchTableName = ref('');
const searchDatabaseName = ref('');
const databaseList = ref([]);
const tableList = ref([]);
const columnList = ref([]);
const checkDatabaseName = ref('');
const checkedTableName = ref('');
const getCurrentConnectedSpinning = ref(false);
const connectSpinning = ref(false);
const tablesTableSpinning = ref(false);
const columnsSpinning = ref(false);

const connect = async function (option) {
    console.log(option);
    connectSpinning.value = true;
    try {
        const result = await window.electron.ipcRenderer.invoke('connect-mysql', {
            host: option.host,
            port: option.port,
            user: option.user,
            password: option.password
        });
        console.log("connect", result);
        connectSpinning.value = false;
    } catch (error) {
        console.error(error);
        
        connectSpinning.value = false;
    }

    getCurrentConnected();
}

const getCurrentConnected = async function () {
    getCurrentConnectedSpinning.value = true;

    try {
        const result = await window.electron.ipcRenderer.invoke('get-current-connected');
        console.log("getCurrentConnected result", result);

        if (result) {
            isConnected.value = true;
            // currentConnectedDBName.value = result[0]['DATABASE()'];
            await getDatabases();
        } else {
            isConnected.value = false;
            currentConnectedDBName.value = '';
        }

        getCurrentConnectedSpinning.value = false;
    } catch (error) {
        console.error(error);

        getCurrentConnectedSpinning.value = false;
    }
}

const getDatabases = async function () {
    if (!isConnected.value) return;

    console.log("getDatabases");
    
    tablesTableSpinning.value = true;

    try {
        const result = await window.electron.ipcRenderer.invoke('show-database-list', {
            databaseName: searchDatabaseName.value
        });
        console.log('getDatabases result', result);
        databaseList.value = result;
        tablesTableSpinning.value = false;
    } catch (error) {
        console.error(error);
        tablesTableSpinning.value = false;
    }
}

const getTables = async function () {
    if (!isConnected.value) return;

    console.log("getTables");
    
    tablesTableSpinning.value = true;
    try {
        const result = await window.electron.ipcRenderer.invoke('show-table-list', {
            tableName: searchTableName.value,
            tableSchema: checkDatabaseName.value
        });
        console.log('getTables result', result);
        tableList.value = result;
        databaseList.value.forEach((database, index) => {
            if (checkDatabaseName.value === database.Database) {
                databaseList.value[index].tables = result;
            }
        });
        tablesTableSpinning.value = false;
    } catch (error) {
        console.error(error);
        tablesTableSpinning.value = false;
    }
}

const getColumnList = async function () {
    if (!isConnected.value) return;

    console.log("getColumnList");
    columnsSpinning.value = true;
    try {
        const result = await window.electron.ipcRenderer.invoke('show-table-detail', {
            databaseName: checkDatabaseName.value,
            tableName: checkedTableName.value
        });
        console.log('getColumnList result', result);
        columnList.value = result;
        columnsSpinning.value = false;
    } catch (error) {
        console.error(error);
        columnsSpinning.value = false;
    }
}

const closeConnect = async function () {
    if (!isConnected.value) return;

    console.log("close-connect");
    try {
        await window.electron.ipcRenderer.invoke('close-connect');
        isConnected.value = false;
    } catch (error) {
        console.error(error);
    }
}

// const init = async function () {
//     await getCurrentConnected();
//     await getTables();
// }

// init();
</script>
<style scoped>
.module-view {
    width: 100%;
    height: 100%;
}
</style>